import Icon from '@/components/Icon';
import { getChannels } from '@/store/slices/home';
import { useInitialState } from '@/utils/use-initial-state';
import { Popup, Tabs } from 'antd-mobile';
import { useState } from 'react';
import Channels from './commponents/Channels';

import styles from './index.module.scss';

const Home = () => {
  const { userChannel } = useInitialState(getChannels, 'home');
  const [visible, setvisible] = useState(false);
  // 弹出层的展示
  const onChannelshow = () => {
    setvisible(true);
  };
  // 弹出层的隐藏
  const onChannelhide = () => {
    setvisible(false);
  };
  return (
    <div className={styles.root}>
      {/* 对于tabs组件来说   需要在有数据的情况下 再渲染tabs 组件，如果没有这么做 会tabs位置高亮出错 */}
      {userChannel.length > 0 && (
        <Tabs className="tabs" activeLineMode="fixed">
          {userChannel.map((item) => {
            return (
              <Tabs.Tab title={item.name} key={item.id}>
                推荐频道的内容
              </Tabs.Tab>
            );
          })}
        </Tabs>
      )}

      <div className="tabs-opration">
        <Icon type="iconbtn_search" />
        <Icon type="iconbtn_channel" onClick={onChannelshow} />
      </div>
      <Popup className="channel-popup" visible={visible} position="left">
        <Channels onclose={onChannelhide} />
      </Popup>
    </div>
  );
};

export default Home;
